<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="modern" lang="zh-cmn-Hans"><!--<![endif]-->
<head>
    <%- include('i-head') %>
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="<%- Virtual_Path.Static %>common/css/common.css">
    <link rel="stylesheet" type="text/css" media="screen" href="<%- Virtual_Path.Static %>common/css/animate.min.css">
    <!-- bootstrap -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>aceadmin/css/bootstrap.min.css"/>
    <!-- font -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>common/font/google_opensans_v10/font.css">
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>common/font/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- ace settings handler -->
    <script src="<%- Virtual_Path.Static %>aceadmin/js/ace-extra.min.js"></script>
    <!-- basic scripts -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%- Virtual_Path.Static %>jquery/jquery-2.1.4.min.js'>" + "<" + "/script>");
    </script>
    <script type="text/javascript">
        if ('ontouchstart' in document.documentElement) document.write("<script src='<%- Virtual_Path.Static %>aceadmin/js/jquery.mobile.custom.js'>" + "<" + "/script>");
    </script>
    <!-- lodash -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/lodash/lodash.min.js"></script>
    <!-- moment -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/moment/moment.min.js"></script>
    <!-- JQuery.Easing -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/easing/jquery.easing.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/easing/jquery.easing.compatibility.js"></script>
    <!-- JQuery.Easypiechart -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/easypiechart/jquery.easypiechart.min.js"></script>
    <!-- JQuery.Colorbox -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/colorbox/colorbox.min.css"/>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/colorbox/colorbox.custom.css"/>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/colorbox/jquery.colorbox-min.js"></script>
    <!-- JQuery.Plugin.Select2 -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/select2/select2.min.css"/>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/select2/select2.full.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/select2/select2_locale_zh-CN.js"></script>
    <!-- JQuery.Form -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/form/jquery.form.min.js"></script>
    <!-- JQuery.Validate -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/validate/jquery.validate.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/validate/jquery.validate.extend.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/validate/additional-methods.min.js"></script>
    <!-- JQuery.MaskedInput -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/maskedinput/jquery.maskedinput.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin/maskedinput/jquery.maskedinput.custom.js"></script>
    <!-- flavr -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/flavr/flavr.min.js"></script>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/flavr/flavr.css"/>
    <!-- koc -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin/koc/koc.min.js"></script>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/koc/koc.css"/>
    <!-- bootstrap -->
    <script src="<%- Virtual_Path.Static %>aceadmin/js/bootstrap.min.js"></script>
    <!-- JQuery.Plugin.Bootstrap.DatetimePicker -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin.bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css"/>
    <script src="<%- Virtual_Path.Static %>jquery.plugin.bootstrap/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="<%- Virtual_Path.Static %>jquery.plugin.bootstrap/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- bootstrap-select -->
    <script src="<%- Virtual_Path.Static %>jquery.plugin.bootstrap/select/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin.bootstrap/select/bootstrap-select.min.css"/>
    <!-- ace styles class="ace-main-stylesheet id="main-ace-style" -->
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>aceadmin/css/ace.min.css"/>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>aceadmin/css/ace.custom.css"/>
    <!-- Admin Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="<%- Virtual_Path.Static %>admin/css/common.css">

    <script src="/js/common.js"></script>
    <script src="/js/common.main.js"></script>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>main/css/common.css"/>
    <link rel="stylesheet" href="<%- Virtual_Path.Static %>main/css/usercenter.css">

</head>
<body>
<%- include('header') %>
<div class="uc-container uc-mt30 clearfix">
    <div class="uc-sidebar">
        <div class="uc-profile">
            <div class="uc-user">
                <div class="uc-user-port">
                    <div class="uc-user-pic">
                        <a class="user-pic-avator" href="javascript:;" >
                            <img class="user-pic-img" id="J_User_Img">
                            <span class="user-pic-mask"></span>
                            <i class="user-icon-photo"></i>
                        </a>
                    </div>
                    <div class="uc-user-info">
                        <p>
                            <span class="tag-user-level" id="J_User_LevelA"></span>
                            <span class="tag-anchor-level ico-anchor-level-3"></span>
                        </p>
                        <p class="uc-user-name"><a href="javascript:;"><sapn id="J_User_NickName"></sapn><i class="user-icon-edit"></i></a></p>
                        <p class="uc-user-id">ID: <span id="J_User_ID"></span></p>
                    </div>
                </div>
            </div>
            <div class="user-wallet">
                <h3 class="wallet-title">
                    <span>我的钱包</span>
                </h3>
                <div class="wallet-body">
                    <p>金币：<span id="J_User_Coin">0</span><a href="/pay/" target="_blank" class="btn-ws btn-ws-1">充值</a></p>
                    <p>金豆：<span id="J_User_Beans">0</span><a href="javascript:;" class="btn-ws btn-ws-2">兑换</a></p>
                </div>
            </div>
            <div class="user-level-progress">
                <div class="now-level">
                    <span class="tag-user-level" id="J_User_LevelB"></span>
                </div>
                <div class="level-progress-bar">
                    <p class="text">还差<span class="count" id="J_User_DifferCoin"></span>金币升级</p>
                    <div class="level-progress-outer">
                        <div class="level-progress-inner" id="J_User_Progress"></div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="uc-left-menu" id="J_Uc_LeftMenu">
            <li class="has-sub-menu">
                <a href="javascript:;">
                    <i class="uc-icon uc-icon-line"></i>
                    关注
                    <i class="uc-icon nav-icon-hook  uc-icon-open"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:;">我的关注</a>
                    </li>
                    <li>
                        <a href="javascript:;">我的粉丝</a>
                    </li>
                </ul>
            </li>
            <li class="has-sub-menu">
                <a href="javascript:;">
                    <i class="uc-icon uc-icon-line"></i>
                    我的钱包
                    <i class="uc-icon nav-icon-hook  uc-icon-open"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:;">充值记录</a>
                    </li>
                    <li>
                        <a href="javascript:;">消费记录</a>
                    </li>
                </ul>
            </li>
            <li class="has-sub-menu">
                <a href="javascript:;">
                    <i class="uc-icon uc-icon-line"></i>
                    我的资料
                    <i class="uc-icon nav-icon-hook  uc-icon-open"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:;">资料修改</a>
                    </li>
                    <li>
                        <a href="javascript:;">密码修改</a>
                    </li>
                    <li>
                        <a href="javascript:;">绑定手机</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="uc-right-container">
        <%- Content %>
    </div>
</div>

<script>
    $(function () {
        //导航菜单
        var host = window.location.host;
        var href = window.location.href;
        href = href.replace("http://" + host, "");
        $(".navmenu-list a[href='" + href + "']").parent("li").addClass("on");
        if (!_StateData.IsLogin) {
            return;
        }
        $('#J_User_NickName').text(_StateData.NickName);
        $('#J_User_Img').attr('src', $.Common.ImageBind.UserAvatar.fnURL(_StateData.User_ID, "80.80"));
        $('#J_User_ID').text(_StateData.User_ID);
        $.CommonMain.User_UserInfo(function (json) {
            $('#J_User_Coin').text(json.data.Coin);
            $('#J_User_Beans').text(json.data.Beans);
            $('#J_User_LevelA,#J_User_LevelB').addClass('ico-level-'+ json.data.Level);

            var prcent = (json.data.EXP / json.data.EXP_Next).toFixed(2) * 100 + "%";
            $("#J_User_Progress").css('width', prcent);
            $('#J_User_DifferCoin').text(json.data.EXP_Difference);
        });

        $('#J_Uc_LeftMenu').on("click",'li.has-sub-menu',function (e) {
            $(this).addClass('active-item').children('.sub-menu').show().end().siblings().removeClass('active-item').children('.sub-menu').hide();
            $('.nav-icon-hook').removeClass('uc-icon-close').addClass('uc-icon-open');
            $(this).find('.nav-icon-hook').removeClass('uc-icon-open').addClass('uc-icon-close');
        });
        $('.sub-menu').on("click",'li',function (e) {
            e.stopPropagation();
            $(this).addClass('active-item').siblings().removeClass('active-item');
        });
    })
</script>
<%- include('footer') %>
</body>
</html>
